<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>date selector</title>
    <link rel="Stylesheet" href="../lib/css/j3.css" />
    <script type="text/javascript" src="../lib/js/j3.js"></script>
    <script type="text/javascript" src="../lib/js/lang/zh-cn.js"></script>
</head>
<body>
<p id='ctnr1'></p>
<p id='ctnr2' style="width:150px"></p>
<p id='log'></p>
<script type="text/javascript">
    j3.ready(function () {
        new j3.Calendar({ctnr:'ctnr1', date:j3.DateTime.today().addDay(1)});

        new j3.DateSelector({ctnr:'ctnr2', date:j3.DateTime.today(),
            fill: 1,
            on : {
              change : function(sender, args){
                j3.$('log').innerHTML = 'oldDate: ' + args.oldDate.toString() + '<br />' + 'oldDate: ' + args.oldDate.toString();
              }
            }
          });
    });
</script>
</body>
</html>
